import { FC, useEffect, useState } from 'react';

import { commonClassificationApi } from '@/api/common';

interface SelectTagsProps {
	type: string | number;
	active: string;
}

interface TagItem {
	id: string;
	name: string;
	label: string;
	value: string;
	[key: string]: any;
}

const SelectTags: FC<SelectTagsProps> = props => {
	const { type, active } = props;
	const [list, setList] = useState<TagItem[]>([]);

	useEffect(() => {
		getSearchListData({ parentId: [], type }, setList);
	}, [type]);

	const getSearchListData = async (
		params: {
			parentId: string[];
			type: string | number;
		},
		cb: (data: TagItem[]) => void
	) => {
		const res = await commonClassificationApi(params);
		const activeList: string[] = active ? active.split(',') : [];
		let data: TagItem[] = [];
		if (res.success) {
			data = res.data
				.filter(v => activeList.includes(String(v.id)))
				.map(v => ({
					...v,
					id: String(v.id),
					name: v.name ?? '',
					label: v.name ? String(v.name) : '',
					value: v.id ? String(v.id) : ''
				}));
			cb(data);
		}
	};

	return (
		<div className="w-full flex flex-wrap gap-2">
			{list.map(v => (
				<ATag color="#3ca590" key={v.id}>
					{v.label}
				</ATag>
			))}
		</div>
	);
};

export default SelectTags;
